<template>
  <div style="height: 22px;padding-top: 2px;width: 42px">
    <div v-if="connectType === 'Ethernet'" style="margin-left: 4px">
      <svg v-if="status === 'ONLINE'" style="width: 40px;height:32px;padding-bottom: 13px" t="1600502274967" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10215" width="200" height="200"><path d="M1024 416v448a32 32 0 0 1-32 32h-160V640h-64v256h-128V640h-64v256h-128V640h-64v256h-128V640H192v256H32a32 32 0 0 1-32-32V416a32 32 0 0 1 32-32h96v-96a32 32 0 0 1 32-32h96V160a32 32 0 0 1 32-32h448a32 32 0 0 1 32 32v96h96a32 32 0 0 1 32 32v96h96a32 32 0 0 1 32 32z" opacity=".4" p-id="10216" fill="#1296db" /><path d="M384 896h64V640h-64z m-192 0h64V640H192z m384 0h64V640h-64z m192-256v256h64V640z" p-id="10217" fill="#1296db" /></svg>
      <svg v-else style="width: 40px;height:32px;padding-bottom: 13px" t="1600502274967" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10215" width="200" height="100"><path d="M1024 416v448a32 32 0 0 1-32 32h-160V640h-64v256h-128V640h-64v256h-128V640h-64v256h-128V640H192v256H32a32 32 0 0 1-32-32V416a32 32 0 0 1 32-32h96v-96a32 32 0 0 1 32-32h96V160a32 32 0 0 1 32-32h448a32 32 0 0 1 32 32v96h96a32 32 0 0 1 32 32v96h96a32 32 0 0 1 32 32z" opacity=".4" p-id="10216" /><path d="M384 896h64V640h-64z m-192 0h64V640H192z m384 0h64V640h-64z m192-256v256h64V640z" p-id="10217" /></svg>
    </div>
    <div v-else style="position: relative;left: 2px">
      <el-tooltip effect="dark" :content="$t(status)+' '+signalVal+'dBn'" placement="left-start">
        <div ref="sign" class="div_sign">
          <div class="div1" :style="{background:firstBackgroundColor}" />
          <div class="div2" :style="{background:secondBackgroundColor}" />
          <div class="div3" :style="{background:thirdBackgroundColor}" />
          <div class="div4" :style="{background:fourthBackgroundColor}" />
        </div>
      </el-tooltip>
      <i v-if="status=='DISABLE'" class="el-icon-warning-outline status" />
      <i v-else-if="status=='UNACTIVE'" class="el-icon-link status" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppSignal',
  props: {
    signal: {
      type: Number,
      default: 0
    },
    status: {
      type: String,
      default: null
    },
    connectType: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      firstBackgroundColor: '#FFF',
      secondBackgroundColor: '#FFF',
      thirdBackgroundColor: '#FFF',
      fourthBackgroundColor: '#FFF',
      signalVal: ''
    }
  },
  watch: {
    signal: {
      deep: true,
      handler(val) {
        this.getCount()
      }
    },
    status: {
      deep: true,
      handler(val) {
        this.getCount()
      }
    }
  },
  created() {
    this.getCount()
  },
  methods: {

    getCount() {
      // console.log(this.signal+this.StatusCount)
      if (this.signal > 25) {
        this.count = 5
      } else if (this.signal > 19) {
        this.count = 5
      } else if (this.signal > 13) {
        this.count = 4
      } else if (this.signal > 7) {
        this.count = 3
      } else if (this.signal > 7) {
        this.count = 2
      } else {
        this.count = 1
      }
      this.signalVal = -(113 - 2 * this.signal)
      if (this.status === 'ONLINE') {
        if (this.count === 1) {
          this.firstBackgroundColor = '#03c2c2'
        } else if (this.count === 2) {
          this.firstBackgroundColor = '#03c2c2'
        } else if (this.count === 3) {
          this.firstBackgroundColor = '#03c2c2'
          this.secondBackgroundColor = '#03c2c2'
        } else if (this.count === 4) {
          this.firstBackgroundColor = '#03c2c2'
          this.secondBackgroundColor = '#03c2c2'
          this.thirdBackgroundColor = '#03c2c2'
        } else if (this.count > 4) {
          this.firstBackgroundColor = '#03c2c2'
          this.secondBackgroundColor = '#03c2c2'
          this.thirdBackgroundColor = '#03c2c2'
          this.fourthBackgroundColor = '#03c2c2'
        }
      } else {
        this.firstBackgroundColor = '#FFF'
        this.secondBackgroundColor = '#FFF'
        this.thirdBackgroundColor = '#FFF'
        this.fourthBackgroundColor = '#FFF'
      }
    }
  }
}
</script>

<style lang="scss">

  @import '@/styles/element-variables.scss';

  .div_sign {
    width: 30px;
    margin: 0px auto;
    position: relative;
  }

  .div1 {
    width: 6px;
    height: 6px;
    position: absolute;
    top: 14px;
    border: 1px solid #03c2c2;
  }

  .div2 {
    width: 6px;
    height: 10px;
    position: absolute;
    top: 10px;
    left: 8px;
    border: 1px solid #03c2c2;
  }

  .div3 {
    width: 6px;
    height: 14px;
    position: absolute;
    top: 6px;
    left: 16px;
    border: 1px solid #03c2c2;
  }

  .div4 {
    width: 6px;
    height: 20px;
    position: absolute;
    top: 0px;
    left: 24px;
    border: 1px solid #03c2c2;
  }

  .status {
    position: absolute;
    left: 30%;
    font-weight: 550;
  }
</style>
